<template>
 <div class="container">
   <div ref="chart_ref" style="width: 600px; height: 400px"></div>
 </div>
</template>

<script>
export default {
  name: 'userData',
  components: {},
  props: ['tableList'],
  data () {
    return {
      position: [],
      nvAdminNum: 0,
      nanAdminNum: 0,
      nvStuNum: 0,
      nanStuNum: 0
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    for (let i = 0; i < this.tableList.length; i++) {
      this.position.push(this.tableList[i].position)
    }
    // this.position = Array.from(new Set(this.position))
    console.log('this.position', this.position)
    this.initChart()
  },
  methods: {
    fre (i) {
      const arr = this.position.sort()
      return arr.lastIndexOf(i) - arr.indexOf(i) + 1
    },
    initChart () {
      const seriesData = Array.from(new Set(this.position)).map(item => {
        const value = this.position.map(i => {
          // console.log('item', item)
          // console.log('fre', this.fre(item))
          return this.fre(item)
        })

        // console.log('value', value)

        return {
          name: item,
          value: value
        }
      })
      var mChart = this.$echarts.init(this.$refs.chart_ref)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: seriesData
          // data: [
          //   { value: this.nvAdminNum, name: `女教师数：${this.nvAdminNum}` },
          //   { value: this.nanAdminNum, name: `男教师数：${this.nanAdminNum}` },
          //   { value: this.nvStuNum, name: `女学生数：${this.nvStuNum}` },
          //   { value: this.nanStuNum, name: `男学生数：${this.nanStuNum}` }
          // ]
        }]
      }
      mChart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">

</style>
